<template>
  <div class="box" v-if="isShow">
    <van-dialog v-model="regShow" class="dialog">
      <p class="p1">{{ $t("common.zhuce") }}</p>
      <img
        @click="isShow = false"
        style="position: absolute; right: 4vw; top: 6.8vw; width: 6vw"
        src="../assets/images/close.png"
        alt=""
      />
      <!-- <p class="p2">为更好的提升您的用户体验，请绑定邮箱接收平台通知。</p> -->
      <p class="p5">{{ $t("common.bangdingyouxiang") }}</p>
      <div class="message1">
        <emailAuto @emailChange="(val) => (regForm.email = val)" />
        <p @click="sendEmailCode">
          {{
            sendEmailText === $t("common.fasongyanzhengma")
              ? sendEmailText
              : sendEmailText + "s"
          }}
        </p>
      </div>
      <p class="p5">{{ $t("long.qingshuruyanzhengma") }}</p>
      <div class="message1">
        <input
          v-model="regForm.emailCode"
          :placeholder="$t('common.youxiangyan')"
          type="number"
        />
      </div>
      <p class="p5">{{ $t("common.zijinmima") }}</p>
      <div class="message1">
        <input
          v-model="regForm.moneyPassword"
          type="password"
          autocomplete="new-password"
          :placeholder="$t('long.zijinmimawei')"
        />
      </div>
      <p class="p5">{{ $t("common.querenmima") }}</p>
      <div class="message1">
        <input
          v-model="regForm.confirmPassword"
          type="password"
          autocomplete="new-password"
          :placeholder="$t('common.querenmima')"
        />
      </div>
      <p class="p5">{{ $t("common.yaoqingma") }} ({{ $t("long.xuantian") }})</p>
      <div class="message1">
        <input v-model="regForm.invitation" />
      </div>
      <van-button type="info" class="button" @click="regConfirm">{{
        $t("common.queding")
      }}</van-button>
    </van-dialog>
  </div>
</template>

<script>
import {Toast} from 'vant'
import { mapGetters } from "vuex";
import emailAuto from "../components/emailAuto.vue";
export default {
    computed: {
    ...mapGetters(["getUserInfo"]),
  },
  components: {
    emailAuto,
  },
  data() {
    return {
        isShow:false,
      regShow: false,
      sendEmailText: this.$t("common.fasongyanzhengma"),
      regForm: {
        email: "",
        emailCode: "",
        moneyPassword: "",
        invitation: "",
        confirmPassword: "",
      },
    };
  },
  async created(){
    let strurl = window.location.href;
    let invitation = strurl.split("inviteCode=")[1];
    if (invitation && invitation.toString().length > 12) {
      invitation = invitation.slice(0, 12);
    }
    this.regForm.invitation = invitation || "";
    this.regForm.emailCode = '123456'
    if (this.getUserInfo.user_id) {
      await this.$store.dispatch("updateUserInfo");
    }
    if (this.getUserInfo.access_token && !this.getUserInfo.email) {
        this.regShow = true
    }

  },
  methods: {
    async regConfirm() {
      if (!this.regForm.email) {
        Toast(this.$t("common.buweikong"));
        return;
      }
      if (!this.regForm.emailCode) {
        Toast(this.$t("common.yanbuweikong"));
        return;
      }
      if (
        this.regForm.moneyPassword.length < 8 ||
        this.regForm.moneyPassword.length > 32
      ) {
        Toast(this.$t("long.zijinmimayingwei"));
        return;
      }

      if (this.regForm.moneyPassword !== this.regForm.confirmPassword) {
        Toast(this.$t("long.liangcishurubuyizhi"));
        return;
      }
      const ret = await this.$http({
        url: "/user/user/userRegister",
        method: "post",
        data: {
          address: this.getUserInfo.address,
          chain: this.getUserInfo.chain,
          email: this.regForm.email,
          userVerificationCode: this.regForm.emailCode,
          moneyPassword: this.$md5(this.regForm.moneyPassword),
          invitation: this.regForm.invitation,
        },
      });
      if (ret.data.code === 0) {
        Toast(this.$t("long.zhucechenggong"));
        this.regShow = false;
        await this.$store.dispatch("updateUserInfo");
        window.location.reload();
      }
    },
    async sendEmailCode() {
      if (!this.regForm.email) {
        Toast(this.$t("common.buweikong"));
        return;
      }
      if (this.sendEmailText !== this.$t("common.fasongyanzhengma")) {
        return;
      }
      this.sendEmailText = 60;
      const timer = setInterval(() => {
        if (this.sendEmailText <= 1) {
          clearInterval(timer);
          this.sendEmailText = this.$t("common.fasongyanzhengma");
        } else {
          this.sendEmailText -= 1;
        }
      }, 1000);
      const ret = await this.$http({
        url: "/user/email/sendEmail?message=CustomerRegistration",
        method: "post",
        data: {
          email: this.regForm.email,
        },
      });
      if (ret.data.code === 0) {
        Toast(this.$t("common.fasongcheng"));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 88vw !important;
  height: 145.06vw !important;
  border-radius: 2.66vw !important;
  background-color: #090A1B !important;
  margin-top: 5.33vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  ::v-deep .van-dialog__footer {
    display: none;
  }

  .p1 {
    height: 5.86vw;
    color: rgba(255, 255, 255, 100);
    font-size: 4.26vw;
    font-family: PingFangSC-regular;
  }
  .p2 {
    width: 74.93vw;
    height: 10.66vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.73vw;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .p3 {
    width: 12.8vw;
    height: 4.53vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.2vw;
    text-align: left;
    font-family: PingFangSC-regular;
    position: relative;
    top: 15.46vw;
    left: 6.93vw;
  }
  .p5 {
    // width: 19.2vw;
    margin-bottom: 4vw;
    color: rgba(135, 139, 151, 100);
    font-size: 3.2vw;
    text-align: left;
    font-family: PingFangSC-regular;
  }
  .message1 {
    margin-bottom: 4vw;
    width: 76.4vw;
    height: 10.13vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(45, 47, 59, 100);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      width: 66.66vw;
      margin-left: 2vw;
      color: rgba(214, 214, 214, 100);
      font-size: 3.73vw;
      background-color: rgba(45, 47, 59, 100);
      border-width: 0;
    }
    input::-webkit-input-placeholder {
      color: rgba(79, 82, 93, 100);
    }
    p {
      text-align: right;
      color: rgba(245, 213, 90, 100);
      font-size: 3.2vw;
      // width: 22vw;
      margin-right: 4.4vw;
    }
  }
  .button {
    width: 74.4vw;
    height: 9.6vw;
    line-height: 5.33vw;
    border-radius: 1.33vw;
    background-color: rgba(10, 122, 255, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 3.73vw;
    text-align: center;
    //font-family: Arial;
    margin-top: 5vw;
  }
}
.moban{
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,.8);
    width:100%;
    height:100%;
    z-index:1000;
    .zcfont{
        font-size:4vw;
        color:#ccc;
        text-decoration: underline;
        position: absolute;
        left:50%;
        top:40%;
        transform: translate(-50%,-50%);
    }
}
</style>
